import React, { useState, useEffect } from 'react'
import '../../../Orders/Order_management/Component/Css/Order.css'



import { Button, Form, Input, Select, Space, DatePicker } from 'antd';

const { Option } = Select;
const { RangePicker } = DatePicker;


import { getqianuser,updateqianusers } from '../../../../request/api'



export default function Title(props) {
  const { getall, getTitle,list_id } = props
  let [nickname, setnickname] = useState('')
  let [_id, set_id] = useState('')
  let [phone, setphone] = useState('')
  let [Identification_number, setIdentification_number] = useState('')
  let [sex, setsex] = useState('请选择性别')

  // 重置搜索
  const onFinish = async() => {
    setphone('')
    set_id('')
    setnickname('')
    setIdentification_number('')
    setsex('请选择性别')
    const data: any = await  getqianuser ({})
    getTitle(data.data)
  }

  const allgetqianuser : any = async () => {
    let from = {
      phone,
      _id,
      nickname,
      Identification_number,
      sex
    }
    const data: any = await getqianuser ({ from })
    getTitle(data.data)
  }

  const alltype=async(item)=>{
    console.log(list_id);
    let data = await updateqianusers({list_id:list_id,item})
    if(data.code ===200){
      alert('修改成功')
      
      getall(data.code)
    }
    
  }

  return (
    <div>
      <div className='Title'>
        <Input size="large" placeholder="请输入昵称" prefix='昵称：' value={nickname} onChange={(e) => {
          setnickname(e.target.value)
        }} className='user' />
        <Input size="large" placeholder="请输入身份证号" prefix='身份证号：' value={Identification_number} onChange={(e) => {
          setIdentification_number(e.target.value)
        }} className='user' />
        <Input size="large" placeholder="请输入手机号" prefix='手机号：' value={phone} onChange={(e) => {
          setphone(e.target.value)
        }} className='user' />
        <Input size="large" placeholder="请输入用户id" prefix='用户id：' value={_id} onChange={(e) => {
          set_id(e.target.value)
        }} className='user' />
        <Select
          value={sex}
          onChange={(e) => { setsex(e) }}
          className='Select'
          placeholder="请选择性别"
          allowClear
        >
          <Option value="全部">全部</Option>
          <Option value="男">男</Option>
          <Option value="女">女</Option>
        </Select>
        
        <RangePicker showTime className='ShowTime' onChange={(e) => {
          console.log(e);
        }} />
        <div >
          <Button size="large" onClick={() => {
            onFinish()
          }}>重置</Button>
          <Button size="large" onClick={() => {
            allgetqianuser()
          }
          } >检索</Button>
          <Button size="large" style={{ color: 'red', border: '1px solid red'}}>导出</Button>
          <Button size="large" onClick={() => {
            alltype('有效')
          }}>批量启用</Button>
          <Button size="large" onClick={() => {
            alltype('无效')
          }}>批量禁用</Button>

        </div>
      </div>
    </div>
  )
}
